
<div class="layout-container layout-column">
    <div class="mb4j-padding-all">
        <i-row>
            <i-col span="16">
                <button-group>
        			<i-button 
	                    icon="ios-add-circle-outline"
	                    v-on:click="onAddClicked" v-if="perms.add" :title="button.text.add" />
                    <i-button 
                        icon="ios-create-outline" 
                        :disabled="button.disabled" 
                        v-on:click="onEditClicked" v-if="perms.edit" :title="button.text.edit" />
                    <i-button 
                        icon="ios-remove-circle-outline" 
                        :disabled="button.disabled" 
                        v-on:click="onRemoveClicked" v-if="perms.remove" :title="button.text.remove" />
                </button-group>
            </i-col>
            <i-col span="8">
                <i-input search 
                :enter-button="search.button"
                :placeholder="search.placeholder" @on-search="onSearch" />
            </i-col>
        </i-row>
    </div>
    <div class="layout-main mb4j-padding-lbr">
        <i-table 
            ref="selection"
            border
            :height="paging.height" 
            :loading="paging.loading" 
            :columns="paging.columns" 
            :data="paging.data"
            @on-selection-change="onSelectionChange"></i-table>
    </div>
    <div class="layout-footer">
        <Page 
            :current="paging.page"
            :total="paging.total" 
            :page-size="paging.pageSize" 
            show-total
            show-elevator 
            @on-change="onPageChange" />
    </div>
</div><!-- 
<div class="layout-container layout-column main-content">
    <div class="btn-group table-toolbar" role="group">
    	<button type="button" class="btn btn-light" v-if="perms.add" v-on:click="onAddClicked">
        	<i class="fa fa-plus-circle"></i> {{button.text.add}}
        </button>
        <button type="button" class="btn btn-light" :disabled="button.disabled" v-if="perms.edit" v-on:click="onEditClicked">
        	<i class="fa fa-edit"></i> {{button.text.edit}}
        </button>
    	<button type="button" class="btn btn-light" :disabled="button.disabled" v-if="perms.remove" v-on:click="onRemoveClicked">
        	<i class="fa fa-remove"></i> {{button.text.remove}}
        </button>
    </div>
    <table
    	data-pagination="true"
    	data-search="true"
        data-show-refresh="true"
        data-show-toggle="true"
        data-click-to-select="true"
        data-url="/api/launcher/datagrid">
    </table>
</div> -->